<template>
  <div>
    <div class="title-name">{{ namegetlang(userStore.getuserPms.nameLanguage) }}</div>
    <n-grid :cols="1" y-gap="15">
      <n-gi>
        <n-spin :show="show1" description="请稍候...">
          <n-card :bordered="false"
                  :header-style="{
                    padding: '25px 20px 26px',
                  }"
                  :content-style="{
                    padding: '0 20px 30px',
                  }">
            <template #header>
              <div class="room-stat-title">房态统计</div>
              <div class="room-stat-div">
                <span class="room-stat-time">在{{ nowTime }}刷新</span>
                <n-button text style="margin-left: 20px" @click="refreshBaseInfo">
                  <img
                    style="width: 15px;"
                    src="@/assets/images/pms_dashboard_refresh_icon.png"
                  />
                  <span class="room-stat-refresh">刷新</span>
                </n-button>
              </div>
            </template>
            <n-grid :cols="4" x-gap="15">
              <n-gi>
                <div class="room-stat-gi-div" style="background: linear-gradient( 180deg, rgba(228,232,241,0.5) 0%, rgba(249,250,251,0.5) 100%);">
                 <div class="room-stat-gi-div-abso">
                   <div class="room-stat-gi-div-item">
                     <div class="room-stat-gi-div-item-d1">今日预抵</div>
                     <div class="room-stat-gi-div-item-d2">{{ baseInfo.import_bookings }}</div>
                     <div class="room-stat-gi-div-item-d3">已办理入住：<span>{{ baseInfo.checkin_bookings }}</span></div>
                   </div>
                 </div>
                  <img
                    style="width: 140px;"
                    src="@/assets/images/room_stat_icon1.png"
                  />
                </div>
              </n-gi>
              <n-gi>
                <div class="room-stat-gi-div" style="background: linear-gradient( 180deg, rgba(222,234,255,0.5) 0%, rgba(248,250,255,0.5) 100%);">
                  <div class="room-stat-gi-div-abso">
                    <div class="room-stat-gi-div-item">
                      <div class="room-stat-gi-div-item-d1">今日预离</div>
                      <div class="room-stat-gi-div-item-d2">{{ baseInfo.export_bookings }}</div>
                      <div class="room-stat-gi-div-item-d3">已办理退房：<span>{{ baseInfo.checkout_bookings }}</span></div>
                    </div>
                  </div>
                  <img
                    style="width: 140px;"
                    src="@/assets/images/room_stat_icon2.png"
                  />
                </div>
              </n-gi>
              <n-gi>
                <div class="room-stat-gi-div" style="background: linear-gradient( 180deg, rgba(216,241,255,0.5) 0%, rgba(247,251,255,0.5) 100%);">
                  <div class="room-stat-gi-div-abso">
                    <div class="room-stat-gi-div-item">
                      <div class="room-stat-gi-div-item-d1">在住客房数</div>
                      <div class="room-stat-gi-div-item-d2">{{ baseInfo.checked_bookings }}</div>
                      <div class="room-stat-gi-div-item-d3">客房总数：<span>{{ baseInfo.all_room }}</span></div>
                    </div>
                  </div>
                  <img
                    style="width: 140px;"
                    src="@/assets/images/room_stat_icon3.png"
                  />
                </div>
              </n-gi>
              <n-gi>
                <div class="room-stat-gi-div" style="background: linear-gradient( 180deg, rgba(246,232,240,0.5) 0%, rgba(251,249,250,0.5) 100%);">
                  <div class="room-stat-gi-div-abso">
                    <div class="room-stat-gi-div-item">
                      <div class="room-stat-gi-div-item-d1">今日预订</div>
                      <div class="room-stat-gi-div-item-d2">{{ baseInfo.today_stays }}</div>
                      <div class="room-stat-gi-div-item-d3">APP预定：<span>{{ baseInfo.today_app_stays }}</span></div>
                    </div>
                  </div>
                  <img
                    style="width: 140px;"
                    src="@/assets/images/room_stat_icon4.png"
                  />
                </div>
              </n-gi>
            </n-grid>
          </n-card>
        </n-spin>
      </n-gi>
      <n-gi>
        <n-spin :show="show2" description="请稍候...">
          <n-card :bordered="false"
                  :header-style="{
                    padding: '25px 20px 18px',
                  }"
                  :content-style="{
                    padding: '0 20px 23px',
                  }">
            <template #header>
              <span class="room-stat-title">营业额概况</span><span style="font-weight: 400;font-size: 14px;color: #8B8B8B;line-height: 34px">（单位：日元）</span>
            </template>
            <template #header-extra>
              <div style="width: 156px;">
                <n-tabs type="segment" animated default-value="today" pane-wrapper-style="display:none" @update:value="handleUpdateValue">
                  <n-tab-pane name="today" tab="今日"></n-tab-pane>
                  <n-tab-pane name="week" tab="本周"></n-tab-pane>
                  <n-tab-pane name="month" tab="本月"></n-tab-pane>
                </n-tabs>
              </div>
            </template>
            <div style="display: flex">
              <div style="width: 25%;height: 115px">
                <div class="amount-stat-title">总收入额</div>
                <div class="amount-stat-amount">{{ amountInfo.totalIncome }}</div>
                <div class="amount-stat-div">
                  有效收入：<span>{{ amountInfo.effectIncome }}</span>
                  <n-tooltip trigger="hover">
                    <template #trigger>
                      <n-button text style="margin-left: 6px">
                        <img
                          style="width: 12px;"
                          src="@/assets/images/pms_dashboard_question_icon.png"
                        />
                      </n-button>
                    </template>
                    <span>有效收入=总收入-积分抵扣-优惠券抵扣-所有退款</span>
                  </n-tooltip>
                </div>
              </div>
              <div style="flex: 1">
                <n-grid :cols="4" x-gap="11">
                  <n-gi>
                    <div style="overflow: hidden">
                      <img
                        style="float: left;width: 32px;margin-top: 29px"
                        src="@/assets/images/pms_dashboard_amount_icon1.png"
                      />
                      <div style="float: left;flex: 1;margin-left: 8px">
                        <div class="amount-stat-title">PAYCLOUD</div>
                        <div class="amount-stat-amount">{{ amountInfo.payCloudIncome }}</div>
                        <div class="amount-stat-div">退：<span>{{ amountInfo.payCloudRefund }}</span></div>
                      </div>
                    </div>
                  </n-gi>
                  <n-gi>
                    <div style="overflow: hidden">
                      <img
                        style="float: left;width: 32px;margin-top: 29px"
                        src="@/assets/images/pms_dashboard_amount_icon2.png"
                      />
                      <div style="float: left;flex: 1;margin-left: 8px">
                        <div class="amount-stat-title">Strip信用卡</div>
                        <div class="amount-stat-amount">{{ amountInfo.stripIncome }}</div>
                        <div class="amount-stat-div">退：<span>{{ amountInfo.stripRefund }}</span></div>
                      </div>
                    </div>
                  </n-gi>
                  <n-gi>
                    <div style="overflow: hidden">
                      <img
                        style="float: left;width: 32px;margin-top: 29px"
                        src="@/assets/images/pms_dashboard_amount_icon3.png"
                      />
                      <div style="float: left;flex: 1;margin-left: 8px">
                        <div class="amount-stat-title">
                          积分抵扣支付
                          <n-tooltip trigger="hover">
                            <template #trigger>
                              <n-button text style="margin-left: 2px">
                                <img
                                  style="width: 12px;"
                                  src="@/assets/images/pms_dashboard_question_icon.png"
                                />
                              </n-button>
                            </template>
                            <span>积分兑换支付金额比例为1:{{ amountInfo.exchangeRate }}，即1积分={{ amountInfo.exchangeRate }}日元</span>
                          </n-tooltip>
                        </div>
                        <div class="amount-stat-amount">{{ amountInfo.balIncome }}</div>
                        <div class="amount-stat-div">退：<span>{{ amountInfo.balRefund }}</span></div>
                      </div>
                    </div>
                  </n-gi>
                  <n-gi>
                    <div style="overflow: hidden">
                      <img
                        style="float: left;width: 32px;margin-top: 29px"
                        src="@/assets/images/pms_dashboard_amount_icon4.png"
                      />
                      <div style="float: left;flex: 1;margin-left: 8px">
                        <div class="amount-stat-title">优惠券抵扣</div>
                        <div class="amount-stat-amount">{{ amountInfo.couponIncome }}</div>
                        <div class="amount-stat-div">退：<span>{{ amountInfo.couponRefund }}</span></div>
                      </div>
                    </div>
                  </n-gi>
                </n-grid>
              </div>
            </div>

          </n-card>
        </n-spin>
      </n-gi>
      <n-gi>
        <n-spin :show="show3" description="请稍候...">
          <n-card :bordered="false"
                  :header-style="{
                    padding: '25px 20px 20px',
                  }">
            <template #header>
              <span class="room-stat-title">近七天入住率</span>
            </template>
            <div ref="chartRef" style="width: 100%;height: 300px"></div>
          </n-card>
        </n-spin>
      </n-gi>
    </n-grid>
  </div>
</template>

<script setup lang="ts">
import {onMounted, reactive, Ref, ref, watch} from "vue";
import {useECharts} from "@/hooks/web/useECharts";
import {dashboard} from "@/api/comm";
import {formatToDateTime} from "@/utils/dateUtil";
import {useUserStore} from "@/store/modules/user";
import {getlang} from "@/utils/smjcomm";
import * as echarts from "echarts";
import {hexToRgba} from "@/utils/artDesignUtils";

const show1 = ref(false);
const show2 = ref(false);
const show3 = ref(false);
const userStore = useUserStore();
const nowTime = ref(formatToDateTime(new Date(), 'yyyy-MM-dd hh:mm:ss'));
const startDate = ref(formatToDateTime(new Date(), 'yyyy-MM-dd 00:00:00'));
const endDate = ref(formatToDateTime(new Date(), 'yyyy-MM-dd 23:59:59'));
const baseInfo = ref({
  all_room: 0, //客房总数
  checked_bookings: 0, //在住客房数
  checkin_bookings: 0, //已抵数
  checkout_bookings: 0, //已离数
  export_bookings: 0, //预离数
  import_bookings: 0, //预抵数
  today_app_stays: 0, //app预定
  today_stays: 0,  //今日预定
})
const amountInfo = ref({
  totalIncome: 0, // 总收入额
  effectIncome: 0, // 有效收入
  payCloudIncome: 0, // payCloud支付
  payCloudRefund: 0, //payCloud退款
  stripIncome: 0, //stripCloud支付
  stripRefund: 0, // strip退款
  balIncome: 0, // 积分抵扣支付
  balRefund: 0,// 积分抵扣退款
  couponIncome: 0, // 优惠券抵扣
  couponRefund: 0, // 优惠券退款
  exchangeRate: 1, // 积分兑换比例
})

const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);

const namegetlang = (data) => {
  if (data) {
    return getlang(data, userStore.language).content;
  } else {
    return '暂无物业名';
  }
};

const Load1 = () => {
  show1.value = true;
  dashboard({
    type: 'base',
    puid: userStore.getuserPms.uid ? userStore.getuserPms.uid : '',
  })
    .then((res) => {
      baseInfo.value = res.Details
      show1.value = false;
    }).catch((err)=>{
      show1.value = false;
    })
};

const Load2 = () => {
  show2.value = true;
  dashboard({
    type: 'amount',
    puid: userStore.getuserPms.uid ? userStore.getuserPms.uid : '',
    start_date: startDate.value,
    end_date: endDate.value
  })
    .then((res) => {
      amountInfo.value = res.amountStat
      show2.value = false;
    }).catch((err)=>{
    show2.value = false;
  })
};

const Load3 = () => {
  show3.value = true;
  var date = formatToDateTime(new Date(), 'yyyy-MM-dd');
  var base = Date.parse(date); // 转换为时间戳
  var oneDay = 24 * 3600 *1000
  var daytimeArr = []
  for (var i = 1; i < 7 ; i++) { //前七天的时间
    var now = new Date(base -= oneDay);
    var myear = now.getFullYear();
    var month = now.getMonth() + 1;
    var mday = now.getDate()
    daytimeArr.push([myear, month >=10 ?month :'0'+ month, mday>=10?mday:'0'+mday].join('-'))
  }
  daytimeArr = daytimeArr.reverse()
  daytimeArr.push(date)

  dashboard({
    type: 'echarts',
    puid: userStore.getuserPms.uid ? userStore.getuserPms.uid : '',
  })
    .then((res) => {
      let CheckInTrend = [];
      let percentArr = [];
      if(res.CheckInTrend){
        res.CheckInTrend.forEach((item,index) => {
          CheckInTrend[item.date] = item.percent
        })
        daytimeArr.forEach((item,index) => {
          percentArr[index] = CheckInTrend[item] ? CheckInTrend[item] : 0;
        })
      }else{
        percentArr = [0,0,0,0,0,0,0]
      }

      setOptions({
        xAxis: {
          type: 'category',
          data: daytimeArr,
          boundaryGap: false,
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#e8e8e8',
              width: 1
            }
          },
          axisLabel: {
            show: true,
            color: '#999',
            fontSize: 13
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            color: '#999',
            fontSize: 13,
            formatter: '{value} %'
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#e8e8e8',
              width: 1
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#e8e8e8',
              width: 1,
              type: 'dashed' as const
            }
          }
        },
        tooltip: {
          trigger: 'axis',
          valueFormatter: (value) => value + '%'
        },
        series: [
          {
            data: percentArr,
            type: 'line',
            smooth: true,
            symbol: 'none',
            lineStyle: {
              width: 3,
              color: '#5D87FF'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: hexToRgba('#5D87FF', 0.2).rgba
                },
                {
                  offset: 1,
                  color: hexToRgba('#5D87FF', 0.01).rgba
                }
              ])
            }
          }
        ]
      });
      show3.value = false;
    }).catch((err)=>{
    show3.value = false;
  })
};

function refreshBaseInfo(){
  nowTime.value = formatToDateTime(new Date(), 'yyyy-MM-dd HH:mm:ss');
  Load1();
}

function handleUpdateValue(value){
  if(value == 'today'){
    startDate.value = formatToDateTime(new Date(), 'yyyy-MM-dd 00:00:00');
    endDate.value = formatToDateTime(new Date(), 'yyyy-MM-dd 23:59:59');
  }else if(value == 'week'){
    let today = new Date();
    let dayOfWeek = today.getDay();
    let weekStart = new Date(today);
    if (dayOfWeek !== 0) {
      weekStart.setDate(weekStart.getDate() - dayOfWeek + 1);
    } else {
      weekStart.setDate(weekStart.getDate() - dayOfWeek - 6);
    }
    let weekEnd = new Date(today);
    if (dayOfWeek !== 0) {
      weekEnd.setDate(weekEnd.getDate() + (7 - dayOfWeek));
    } else {
      weekEnd.setDate(weekEnd.getDate());
    }
    let start = `${weekStart.getFullYear()}-${(weekStart.getMonth() + 1) > 9 ? weekStart.getMonth() + 1 : '0' + (weekStart.getMonth() + 1)}-${weekStart.getDate() > 9 ? weekStart.getDate() : '0' + weekStart.getDate()}`
    let end = `${weekEnd.getFullYear()}-${(weekEnd.getMonth() + 1) > 9 ? weekEnd.getMonth() + 1 : '0' + (weekEnd.getMonth() + 1)}-${weekEnd.getDate() > 9 ? weekEnd.getDate() : '0' + weekEnd.getDate()}`
    startDate.value = start + ' 00:00:00';
    endDate.value = end + ' 23:59:59';
  }else if(value == 'month'){
    let today = new Date();
    let currentMonth = today.getMonth() + 1;
    const startTime = `${today.getFullYear()}-${currentMonth.toString().padStart(2, '0')}-01 00:00:00`;
    const lastDay = new Date(today.getFullYear(), currentMonth, 0).getDate();
    const endTime = `${today.getFullYear()}-${currentMonth.toString().padStart(2, '0')}-${lastDay.toString().padStart(2, '0')} 23:59:59`;
    startDate.value = startTime;
    endDate.value = endTime;
  }
  Load2();
}

//页面刷新  根据物业选择
watch(
  () => userStore.getuserPms,
  () => {
    Load1();  //当前页面重新加载的数据
    Load2();  //当前页面重新加载的数据
    Load3();  //当前页面重新加载的数据
  },
  {
    immediate: false,
    deep: true,
  }
);

onMounted(() => {
  Load1();
  Load2();
  Load3();
});
</script>

<style scoped lang="less">
  .title-name{
    margin: 15px 0 19px 20px;
    font-weight: 500;
    font-size: 30px;
    color: #3D3D3D;
    line-height: 42px;
  }
  .room-stat-title{
    font-size: 24px;
    color: #3D3D3D;
    font-weight: 500;
    line-height: 34px
  }
  .room-stat-div{
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 5px
  }
  .room-stat-time{
    font-size: 14px;
    color: #8B8B8B;
    font-weight: 400;
    line-height: 20px
  }
  .room-stat-refresh{
    font-size: 14px;
    color: #156BFF;
    line-height: 20px;
    margin-left: 5px
  }
  .room-stat-gi-div{
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    .room-stat-gi-div-abso{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      align-items: center;
    }
    .room-stat-gi-div-item{
      flex: 1;
      margin-left: 30px;
      .room-stat-gi-div-item-d1{
        font-size: 14px;
        color: #3D3D3D;
        font-weight: 500;
        line-height: 20px;
      }
      .room-stat-gi-div-item-d2{
        margin-top: 5px;
        font-size: 28px;
        color: #3D3D3D;
        font-weight: 700;
        line-height: 42px;
      }
      .room-stat-gi-div-item-d3{
        margin-top: 10px;
        font-size: 14px;
        color: #8B8B8B;
        font-weight: 400;
        line-height: 20px;
        span{
          color: #3D3D3D;
          font-weight: 500;
        }
      }
    }
  }
  .amount-stat-title{
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #1D2129;
    line-height: 20px;
    font-weight: 500;
  }
  .amount-stat-amount{
    margin-top: 8px;
    font-size: 24px;
    color: #1D2129;
    line-height: 42px;
    font-weight: 700;
  }
  .amount-stat-div{
    display: flex;
    align-items: center;
    margin-top: 4px;
    font-size: 14px;
    color: #8B8B8B;
    font-weight: 400;
    line-height: 20px;
    span{
      color: #D13820;
    }
  }
</style>
